<template>
  <div class="container">
    <img
      src="../../images/2d49a2c0554d0d78e228cc416af409ac.png"
      style="width: 100%; margin: 0"
      alt=""
    />
    <form @submit.prevent="login">
      <div class="form-group">
        <div class="input-group">
          <label for="username"
            ><img src="../../images/ema.png" alt=""
          /></label>
          <input v-model="username" id="username" type="text" required />
        </div>
        <div class="input-group">
          <label for="password"
            ><img src="../../images/lock.png" alt=""
          /></label>
          <div class="password-container">
            <input
              v-model="password"
              :type="passwordType"
              id="password"
              required
            />
            <img
              src="../../images/login_icon_hide_password_n.png"
              alt="Toggle Password Visibility"
              @click="togglePassword"
              class="eye-icon"
            />
          </div>
        </div>
      </div>
      <div class="container-footer">
        <p class="left" @click="Forgot">忘记密码</p>
        <p class="right" @click="goCompost">申请入住</p>
      </div>
      <button type="submit">登录</button>
    </form>

    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { dl } from "../../utils/api/login";
import { useRouter } from "vue-router";
const router = useRouter();

const username = ref("");
const password = ref("");
const error = ref("");
const passwordType = ref("password");

const goCompost = () => {
  router.push("/Compost");
};

const login = async () => {
  error.value = "";
  try {
    const response = await dl({
      username: username.value,
      password: password.value,
    });
    console.log("response.data", response.data);
    localStorage.setItem("token", response.data.data.token);
    localStorage.setItem(
      "Doctorchat",
      response.data.data.userData.DoctorChat_id
    );
    router.push("/");
  } catch (err) {
    // console.error("Login err", err);
    error.value = "账户密码不对，请重新输入";
  }
};

const togglePassword = () => {
  passwordType.value = passwordType.value === "password" ? "text" : "password";
};

const Forgot = () => {
  router.push("/Settings");
};
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  background-color: #cc0d0d;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}
.container {
  width: 100%;
  height: 100%;
  text-align: center;
}

form {
  display: inline-block;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  text-align: left;
}

.form-group {
  margin-bottom: 15px;
}

.input-group {
  width: 240px;
  height: 40px;
  display: flex;
  margin-top: 25px;
  border: 1px solid #000;
  align-items: center;
  padding: 5px;
}

.input-group label {
  margin-right: 10px;
}

.input-group input {
  padding: 8px;
  box-sizing: border-box;
  width: 205px;
  height: 45px;
  outline: none;
  border: none;
}

.password-container {
  display: flex;
  align-items: center;
}

.eye-icon {
  position: absolute;
  bottom: 260px;
  right: 30px;
}

button {
  width: 90%;
  padding: 10px 15px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  display: block;
  margin: 30px auto;
}

button:hover {
  background-color: #0056b3;
}
.container-footer {
  display: flex;
  justify-content: space-between; /* Place items on opposite sides */
  margin-top: 10px; /* Optional: Adds spacing above the footer */
}

.left,
.right {
  margin: 0; /* Remove default margins */
}
.right {
  color: #0056b3;
}
</style>
